<template>
  <div class="container">
    <div class="app-container">
      <el-button
        type="primary"
        size="mini"
        style="margin:10px"
        @click="handleAdd(0,1)"
      >
        新增权限
      </el-button>

      <!-- 表单结构 -->
      <!-- row-key: 展示树形结构的表格 -->
      <el-table :data="treeData" row-key="id">
        <el-table-column label="名称" align="center" prop="name" />
        <el-table-column label="标识" prop="code" />
        <el-table-column label="描述" prop="description" />
        <el-table-column label="操作">
          <template #default="{row}">
            <el-button v-if="row.type === 1" type="text" size="mini" @click="handleAdd(row.id,2)">新增</el-button>
            <el-button type="text" size="mini" @click="handleEdit(row.id)">编辑</el-button>
            <el-popconfirm title="确定删除吗" style="margin-left:10px" @onConfirm="handleDel(row.id)">
              <template #reference>
                <el-button type="text" size="mini">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>

      <!-- 新增权限弹框 -->
      <el-dialog :title="showText" :visible="visible" width="40%" @close="handleCancel">
        <el-form ref="permRef" label-width="90px" :model="permForm" :rules="permRules">
          <el-form-item label="权限名称" prop="name">
            <el-input v-model="permForm.name" style="width:90%" />
          </el-form-item>
          <el-form-item label="权限标识" prop="code">
            <el-input v-model="permForm.code" style="width:90%" />
          </el-form-item>
          <el-form-item label="权限描述" prop="description">
            <el-input v-model="permForm.description" type="textarea" style="width:90%" />
          </el-form-item>
          <el-form-item label="开启">
            <el-switch v-model="permForm.enVisible" active-value="1" inactive-value="0" />
          </el-form-item>
          <el-form-item>
            <el-row type="flex" justify="center">
              <el-button type="primary" size="mini" @click="handleConfirm">确定</el-button>
              <el-button size="mini" @click="handleCancel">取消</el-button>
            </el-row>
          </el-form-item>
        </el-form>

      </el-dialog>

    </div>
  </div>
</template>

<script>
import { getPermListAPI } from '@/api/permission'
import { list2Tree } from '@/utils'
import { postPermAPI, putPermAPI, delPermAPI, getPermDetailAPI } from '@/api/permission'
export default {
  name: 'Permission',
  data() {
    return {
      // 树形数据
      treeData: [],
      // 控制新增权限弹框可见性
      visible: false,
      // 新增权限表单
      permForm: {
        name: '', // 权限名
        code: '', // 权限标识
        description: '', // 权限描述
        type: '', // 权限类型
        pid: '', // 权限点父级id
        enVisible: '' // 权限点开启状态
      },
      // 指定规则:
      permRules: {
        name: [
          { required: true, message: '名称为必填项', trigger: 'blur' },
          { min: 2, max: 10, message: '名称长度为2~6', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '编码为必填项', trigger: 'blur' },
          { min: 2, max: 10, message: '编码长度为2~6', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '描述为必填项', trigger: 'blur' },
          { min: 1, max: 50, message: '描述长度为1~50', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    showText() {
      return this.permForm.id ? '编辑权限' : '新增权限'
    }
  },
  created() {
    this.getPermList()
  },
  methods: {
    // 删除
    async handleDel(id) {
      // 发请求 (删除权限)
      await delPermAPI(id)
      // 提示信息
      this.$message.success('删除权限成功')
      // 重新获取权限列表
      this.getPermList()
    },
    // 编辑
    async handleEdit(id) {
      // 显示弹框
      this.visible = true
      // 回显数据 (调接口获取数据,并重新赋值)
      this.permForm = await getPermDetailAPI(id)
    },

    // 获取权限列表
    async getPermList() {
      // 发请求 获取权限列表(数组结构)
      const permList = await getPermListAPI()
      // 将数组结构转为树形结构,并赋值
      this.treeData = list2Tree(permList, 0)
    },
    // 取消按钮
    handleCancel() {
      // 关闭弹框
      this.visible = false
      // 重置表单
      this.$refs.permRef.resetFields()
      // 手动重置
      this.permForm = {
        name: '', // 名称
        code: '', // 标识
        description: '', // 描述
        type: '', // 类型 该类型 不需要显示 因为点击添加的时候已经知道类型了
        pid: '', // 因为做的是树 需要知道添加到哪个节点下了
        enVisible: '' // 默认关闭
      }
    },
    // 确定按钮
    handleConfirm() {
      // 整体校验
      this.$refs.permRef.validate(async flag => {
        if (!flag) return
        // 因为编辑与新增权限共用一个弹框,所以点击确定时需要判断是编辑状态下还是新增状态下
        if (this.permForm.id) {
          // 编辑权限状态:
          // 发请求 (编辑权限)
          await putPermAPI(this.permForm)
          // 提示信息
          this.$message.success('修改权限成功')
        } else {
          // 新增权限状态:
          // 发请求 新增权限
          await postPermAPI(this.permForm)
          // 提示信息
          this.$message.success('新增权限成功')
        }
        // 重新获取权限列表
        this.getPermList()
        // 关闭弹框
        this.visible = false
      })
    },
    // 点击新增权限按钮
    handleAdd(pid, type) {
      this.visible = true
      this.permForm.pid = pid
      this.permForm.type = type
    }
  }
}
</script>

<style>

</style>
